<script setup lang="ts">
const emit = defineEmits(['update:visible']);
const props = defineProps({
  tab1: {
    type: Object,
    default: 1
  },
  tab2: {
    type: Object,
    default: 2,
  },
  data: {
    type: Array,
    default: [],
  },
  visible: {
    type: Boolean,
    default: false,
  }
})
const columns = ref<any[]>([]);
const title = ref('');
const calcChildColumns = () => {
  if (props.tab2.activeKey === 'sale') {
    columns.value.push(...[
      {
        dataIndex: 'tradeIndex_tran',
        title: '交易金额',
        width: 100,
        align: 'center',
        dataType: 'customRender',
        render: (text: any, record: any, index: any) => {
          // 每隔三位加逗号
          return text.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
        },
        sorter: (a, b) => a.tradeIndex_tran - b.tradeIndex_tran,
      },
      {
        dataIndex: 'tradeGrowthRange.value',
        title: '交易增长幅度',
        width: 120,
        align: 'center',
        dataType: 'customRender',
        sorter: (a, b) => a.tradeGrowthRange.value - b.tradeGrowthRange.value,
        render: (text: any, record: any, index: any) => {
          if (isNaN((text * 100).toFixed(2))) {
            return '0%';
          }
          return `${(text * 100).toFixed(2)}%`
        }
      },
      {
        dataIndex: 'payRateIndex_tran',
        title: '支付转换率',
        width: 100,
        align: 'center',
        sorter: (a, b) => parseFloat(a.payRateIndex_tran) - parseFloat(b.payRateIndex_tran),
      },
    ]);
  } else if (props.tab2.activeKey === 'search') {
    columns.value.push(...[
      {
        dataIndex: 'uvIndex_tran',
        title: '访客数',
        width: 100,
        align: 'center',
        dataType: 'customRender',
        render: (text: any, record: any, index: any) => {
          // 每隔三位加逗号
          return text.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
        },
        sorter: (a, b) => parseFloat(a.uvIndex_tran) - parseFloat(b.uvIndex_tran),
      },
      {
        dataIndex: 'seIpvUvHits_tran',
        title: '搜索人数',
        width: 100,
        align: 'center',
        dataType: 'customRender',
        render: (text: any, record: any, index: any) => {
          // 每隔三位加逗号
          return text.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
        },
        sorter: (a, b) => parseFloat(a.seIpvUvHits_tran) - parseFloat(b.seIpvUvHits_tran),
      },
      {
        dataIndex: 'seRate',
        title: '搜索占比',
        width: 100,
        align: 'center',
        sorter: (a, b) => parseFloat(a.seRate) - parseFloat(b.seRate),
      },
    ]);
  } else if (props.tab2.activeKey === 'intention') {
    columns.value.push(...[
      {
        dataIndex: 'cltHits_tran',
        title: '收藏人数',
        width: 100,
        align: 'center',
        sorter: (a, b) => parseFloat(a.cltHits_tran) - parseFloat(b.cltHits_tran),
      },
      {
        dataIndex: 'cartHits_tran',
        title: '加购人数',
        width: 100,
        align: 'center',
        sorter: (a, b) => parseFloat(a.cartHits_tran) - parseFloat(b.cartHits_tran),
      },
      {
        dataIndex: 'cardAndClt',
        title: '总收藏加购人数',
        width: 120,
        align: 'center',
        sorter: (a, b) => parseFloat(a.cardAndClt) - parseFloat(b.cardAndClt),
      },
      {
        dataIndex: 'tradeIndex_tran',
        title: '交易金额',
        width: 100,
        align: 'center',
        sorter: (a, b) => parseFloat(a.tradeIndex_tran) - parseFloat(b.tradeIndex_tran),
      },
    ]);
  }
}
const calc = () => {
  if (props.tab1 && props.tab2) {
    title.value = '市场排行-' + props.tab1.data.find(item => item.value == props.tab1.activeKey).text + '_' + props.tab2.data.find(item => item.value == props.tab2.activeKey).text
    if (props.tab1.activeKey === 'shop') {
      columns.value = [
        {
          dataIndex: 'date',
          title: '日期',
          width: 120,
          fixed: 'left',
          sorter: (a, b) => a.date - b.date,
        },
        {
          dataIndex: 'shop.title',
          title: '店铺',
          width: 200,
          fixed: 'left',
          dataType: 'custom',
          slot: 'shop',
        },
        {
          dataIndex: 'platform',
          title: '平台',
          width: 100,
          fixed: 'left',
          align: 'center',
          sorter: (a, b) => a.shop.b2CShop - b.shop.b2CShop,
        },
        {
          dataIndex: 'cate',
          title: '类目',
          fixed: 'left',
          align: 'center',
          width: 200,
          tooltip: true,
        },
        {
          dataIndex: 'cateRankId.value',
          title: '排名',
          width: 100,
          align: 'center',
          dataType: 'customRender',
          render: (text: any, record: any, index: any) => {
            // 每隔三位加逗号
            return text ?? '未上榜';
          },
          sorter: (a, b) => a.cateRankId.value - b.cateRankId.value,
        },
        {
          dataIndex: 'cateRankId.cycleCqc',
          title: '趋势',
          width: 100,
          align: 'center',
          dataType: 'customRender',
          render: (text: any, record: any, index: any) => {
            // 每隔三位加逗号
            let charge = Math.abs(text);
            if (isNaN(charge)) {
              return '持平';
            } else {
              return (text > 0 ? '降' : '升') + charge + '名';
            }
          },
          sorter: (a, b) => a.cateRankId.cycleCqc - b.cateRankId.cycleCqc,
        },
      ];
    } else if (props.tab1.activeKey === 'item') {
      columns.value = [
        {
          dataIndex: 'date',
          title: '日期',
          width: 120,
          fixed: 'left',
          sorter: (a, b) => a.date - b.date,
        },
        {
          dataIndex: 'item.title',
          title: '商品',
          width: 200,
          dataType: 'custom',
          fixed: 'left',
          slot: 'item',
        },
        {
          dataIndex: 'shop.title',
          title: '店铺',
          width: 200,
          fixed: 'left',
          dataType: 'custom',
          slot: 'shop',
        },
        {
          dataIndex: 'platform',
          title: '平台',
          width: 100,
          fixed: 'left',
          align: 'center',
          sorter: (a, b) => a.shop.b2CShop - b.shop.b2CShop,
        },
        {
          dataIndex: 'cate',
          title: '类目',
          fixed: 'left',
          align: 'center',
          width: 200,
          tooltip: true,
        },
        {
          dataIndex: 'cateRankId.value',
          title: '排名',
          width: 100,
          align: 'center',
          dataType: 'customRender',
          render: (text: any, record: any, index: any) => {
            // 每隔三位加逗号
            return text ?? '未上榜';
          },
          sorter: (a, b) => a.cateRankId.value - b.cateRankId.value,
        },
        {
          dataIndex: 'cateRankId.cycleCqc',
          title: '趋势',
          width: 100,
          align: 'center',
          dataType: 'customRender',
          render: (text: any, record: any, index: any) => {
            // 每隔三位加逗号
            let charge = Math.abs(text);
            if (isNaN(charge)) {
              return '持平';
            } else {
              return (text > 0 ? '降' : '升') + charge + '名';
            }
          },
          sorter: (a, b) => a.cateRankId.cycleCqc - b.cateRankId.cycleCqc,
        },
      ];
    } else if (props.tab1.activeKey === 'brand') {
      columns.value = [

        {
          dataIndex: 'date',
          title: '日期',
          width: 120,
          fixed: 'left',
          sorter: (a, b) => a.date - b.date,
        },
        {
          dataIndex: 'cate',
          title: '类目',
          fixed: 'left',
          align: 'center',
          width: 200,
          tooltip: true,
        },
        {
          dataIndex: 'cateRankId.value',
          title: '排名',
          width: 100,
          align: 'center',
          dataType: 'customRender',
          render: (text: any, record: any, index: any) => {
            // 每隔三位加逗号
            return text ?? '未上榜';
          },
          sorter: (a, b) => a.cateRankId.value - b.cateRankId.value,
        },
        {
          dataIndex: 'brandModel.brandName',
          title: '品牌',
          width: 200,
          fixed: 'left',
          dataType: 'custom',
          slot: 'brandModel',
        }
      ];
    }
    calcChildColumns();
  }
}
watch(() => props.visible, (val) => {
  if (val) {
    calc();
  }
})
</script>

<template>
  <custom-modal :visible="visible" style="top: 20px;" :title="'市场'+title" width="95%"
                @cancel="emit('update:visible',false)"
  >
    <div style="max-height: calc(100vh - 150px);overflow-y: auto;">
      <base-table :table-name="'市场'+title" :data-source="data" :columns="columns" size="small">
        <template #shop="row">
          <a-row>
            <a-col>
              <img :src="row.shop.pictureUrl" style="width: 30px;height:30px;"/>
            </a-col>
            <a-col style="padding-left: 10px" flex="1" class="text-ellipsis">
              <a :href="row.shop.shopUrl" style="line-height: 30px;" target="_blank">{{ row.shop.title }}</a>
              <i class="xc-anticon anticon-tm oui-canary-icon oui-canary-icon-tm" v-if="row.shop.b2CShop"
                 style="color: #ff4d4f;margin-left: 5px;"
              ></i>
            </a-col>
          </a-row>
        </template>
        <template #item="row">
          <a-row>
            <a-col>
              <img :src="row.item.pictUrl" style="width: 30px;height:30px;"/>
            </a-col>
            <a-col class="text-ellipsis" style="padding-left: 10px" flex="1">
              <a :href="row.item.detailUrl" style="line-height: 30px;" target="_blank">{{ row.item.title }}</a>
            </a-col>
          </a-row>
        </template>
        <template #brandModel="row">
          <a-row>
            <a-col>
              <a-image v-if="typeof row.brandModel.logo!='undefined'"
                       :src="`https://img.alicdn.com/tps/${row.brandModel.logo}_48x48.jpg`" style="width: 30px;"
              />
              <img v-else src="https://img.alicdn.com/tps/TB1P1W_LXXXXXXoXVXXXXXXXXXX-74-74.png" style="width: 30px;"/>
            </a-col>
            <a-col style="padding-left: 10px" class="text-ellipsis" flex="1">
              {{ row.brandModel.brandName }}
            </a-col>
          </a-row>
        </template>
      </base-table>
    </div>
  </custom-modal>
</template>

<style scoped>
.text-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 40px);
}
</style>
